<!DOCTYPE html>
<html>

<head>
    <title>圈圈运动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 100%;
            height: 500px;
            position: relative;
        }
        
        .wrap-box {
            width: 50%;
            margin: 0 auto;
        }
        
        .circular {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: #DEDEDE;
            border-radius: 100%;
        }
        
        .circular:hover {
            background-color: #FF3030;
        }
        
        .one {
            left: 500px;
            top: 200px;
        }
        
        .flex-row {
            display: flex;
            flex-direction: row;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-box">
            <div id="one" class="circular one">

            </div>
        </div>
    </div>
    <div class="flex-row">
        <button id="clickId" style="margin-left: 0px;">click</button>
        <button id="clickId1" style="margin-left: 400px;">click</button>
        <button id="clickId2" style="margin-left: 600px;">click</button>
        <button id="clickId3" style="margin-left: 800px;">click</button>
        <button id="clickId4" style="margin-left: 1000px;">click</button>
    </div>
    <script src="./zepto.js"></script>
    <script src='./fx.js'></script>
    <script>
        $(document).ready(function() {
            // $('#one').fadeIn(5000);
            console.log($('#clickId').offset());

            for (let index = 0; index < $('.flex-row').children().length; index++) {
                const element = $('.flex-row').children()[index];
                console.log(element);
                console.log($(element).offset().left, $(element).offset().top);

                $(element).on("click", function(e) {
                    $('#one').animate({
                        left: $(element).offset().left + 'px',
                        top: $(element).offset().top + 'px',
                        width: 0,
                        height: 0,
                        opacity: 0
                    }, 5000, function() {
                        // $('#one').css('display', 'none');
                    });
                    e.stopPropagation();
                });
            }
        });
    </script>
</body>

</html>